<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        .main{
        }
        .main ul li .li_box {
            height: 50px;
            line-height: 50px;
            display: -webkit-box;
            display: -webkit-flex;
            align-items: center;
            border-bottom: 1px solid #e8e8e8;
            background-color: #fff;
            padding-left: 15px;
        }
        .main ul li:first-child .li_box {
            height: 65px;
            line-height: 65px;
        }
        .main ul li:nth-child(5) .li_box {
            border-bottom: none;
            margin-bottom: 6px;
        }
        .main ul li:nth-child(6) .li_box {
            border-bottom: none;
            margin-bottom: 6px;
        }
        .main ul li:nth-child(7) .li_box {
            border-bottom: none;
            margin-bottom: 6px;
        }
        .main ul li:nth-child(8) .li_box {
            border-bottom: none;
            margin-bottom: 6px;
        }
        .main ul li:nth-child(9) .li_box {
        	height: 75px;
            border-bottom: none;
            margin-bottom: 6px;
            padding-right: 15px;
        }
        .main ul li:nth-child(10) .li_box {
        	height: 75px;
            padding-right: 15px;
            border-bottom: none;
        }
        .main ul li:nth-child(11) .li_box {
            height: 75px;
            padding-right: 15px;
            border-bottom: none;
        }
        .main ul li:nth-child(12) .li_box {
            height: 75px;
            padding-right: 15px;
            border-bottom: none;
        }
        .main ul li:nth-child(13) .li_box {
            height: 75px;
            padding-right: 15px;
            border-bottom: none;
        }
        .main ul li .li_box .li_boxl {
            font-size: 15px;
            color: #333;
            padding-right: 10px;
        }
        .main ul li .li_box .li_boxr {
        	height: 100%;
            color: #999;
            font-size: 12px;
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
            text-align: right;
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: end;
        }
        .main ul li .li_box .li_boxr .li_img {
        	width: 42px;
        	height: 42px;
        	border-radius: 50%;
        	overflow: hidden;
        	margin-right: 10px;
        }
        .main ul li .li_box .li_boxr .li_img img {
        	width: 100%;
        	height: 100%;
            object-fit: cover;
        }
        .main ul li .li_box .li_boxr .right {
        	height: 13px;
        	display: block;
            padding-right: 15px;
        }
        .main ul li .li_box .li_boxr input {
        	width: 100%;
        	height: 100%;
        	color: #999;
            font-size: 12px;
            text-align: right;
            padding: 0 15px;
            box-sizing: border-box;
            display: block;
        }
        .main ul li .li_box .li_boxr input::-webkit-input-placeholder {
        	color: #999;
        }
        .main ul li .li_box .li_boxr .add_id_card {
        	width: 55px;
        	height: 55px;
        }
        .main ul li .li_box .li_boxr .add_id_card img {
        	width: 100%;
            object-fit: contain;
        	height: 100%;
        }
        .main ul li .li_box .li_boxr .id_card {
            height: 55px;
            width: 55px;
            padding-right: 15px;
        }
        .main ul li .li_box .li_boxr .id_card img {
            width: 100%;
            object-fit: contain;
            height: 100%;
        	/*height: 55px;*/
        	/*display: block;*/
        }
        .choose_bank{
            width: 100%;
            height: 100%;
            color: #999;
            font-size: 12px;
            text-align: right;
            padding: 0 15px;
            box-sizing: border-box;
            display: block;
        }
    </style>
</head>
<body>
    <div class="main">
    	<ul>
    		<li tapmode onclick="toStaffHead();">
                <div class="li_box">
                    <div class="li_boxl">头像</div>
                    <div class="li_boxr">
                    	<div class="li_img">
                    		<img class="img" src="../image/my.png">
                    	</div>
                        <img class="right" src="../image/right.png">
                    </div>
                </div>
            </li>
            <li>
                <div class="li_box">
                    <div class="li_boxl">您的姓名</div>
                    <div class="li_boxr">
                    	<input type="text" class="name" placeholder="请填写">
                    </div>
                </div>
            </li>
            <li>
                <div class="li_box">
                    <div class="li_boxl">手机号</div>
                    <div class="li_boxr">
                    	<input type="tel" class="phone" placeholder="请填写">
                    </div>
                </div>
            </li>
            <li>
                <div class="li_box">
                    <div class="li_boxl">联系地址</div>
                    <div class="li_boxr">
                    	<input type="text" class="address" placeholder="请填写">
                    </div>
                </div>
            </li>
            <li>
                <div class="li_box">
                    <div class="li_boxl">身份证号码</div>
                    <div class="li_boxr">
                    	<input type="text" class="idcard" placeholder="请填写">
                    </div>
                </div>
            </li>
            <li tapmode onclick="fnChooseBank();">
                <div class="li_box">
                    <div class="li_boxl">开户银行</div>
                    <div class="li_boxr">
                        <span class="choose_bank">请选择</span>
                    </div>
                </div>
            </li>
            <li>
                <div class="li_box">
                    <div class="li_boxl">开户人</div>
                    <div class="li_boxr">
                        <input type="text" class="bank_account_name" placeholder="请填写">
                    </div>
                </div>
            </li>
            <li>
                <div class="li_box">
                    <div class="li_boxl">银行账户</div>
                    <div class="li_boxr">
                        <input type="text" class="account" placeholder="请填写">
                    </div>
                </div>
            </li>
            <li tapmode onclick="toIdcardPhone('front');">
                <div class="li_box">
                    <div class="li_boxl">身份证正面照片</div>
                    <div class="li_boxr">
                    	<div class="add_id_card">
	                    	<img class="frontside" src="../image/add_id_card.png">
                    	</div>
                    </div>
                </div>
            </li>
            <li tapmode onclick="toIdcardPhone('reverse');">
                <div class="li_box">
                    <div class="li_boxl">身份证反面照片</div>
                    <div class="li_boxr">
                        <div class="add_id_card">
                            <img class="reverseside" src="../image/add_id_card.png">
                        </div>
                    </div>
                </div>
            </li>
            <li tapmode onclick="toIdcardPhone('drive_front');">
                <div class="li_box">
                    <div class="li_boxl">驾驶证正面照片</div>
                    <div class="li_boxr">
                        <div class="add_id_card">
                            <img class="drive_frontside" src="../image/add_id_card.png">
                        </div>
                    </div>
                </div>
            </li>
            <li tapmode onclick="toIdcardPhone('drive_reverse');">
                <div class="li_box">
                    <div class="li_boxl">驾驶证反面照片</div>
                    <div class="li_boxr">
                        <div class="add_id_card">
                            <img class="drive_reverseside" src="../image/add_id_card.png">
                        </div>
                    </div>
                </div>
            </li>
    	</ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    
    var img = ''; // 头像
    var frontside = ''; // 身份证正面
    var reverseside = ''; // 身份证反面
    var bank = '';
    var bank_account_name = '';
    var account = '';
    var drive_frontside = '';
    var drive_reverseside = '';

    apiready = function(){
        
        api.addEventListener({
            name: 'changeApplyStaffHead'
        }, function(ret, err) {
            if (ret) {
                img = ret.value.path?ret.value.path:'';
                $(".img").attr('src',formatHeadImg(img));
                // alert(ret.value.path);
            }
        });
        
        api.addEventListener({
            name: 'toApplyStaff'
        }, function(ret, err){
            if( ret ){
                fnGoApply();
            }
        });
    };

    function fnChooseBank () {
        $("input").blur();
        openLoading();
        var staffData = $api.getStorage('staff_data');
        api.ajax({
            url: rootPath+'/api/staff/get_all_bank',
            method: 'post',
            data: {
                values: { 
                    staff_id: staffData.id,
                    staff_token: staffData.token,
                },
            }
        }, function(ret, err) {
            if (ret && ret.status == 200) {
                var items = [];
                $.each(ret.data, function(k, v) {
                    var obj = {text: v.name,status : 'normal', id : v.id};
                    items.push(obj);
                });
            } else {
                var items = [{text: '暂无银行',status : 'normal', id : 0}];
            }
            fnShowSelect(items);
            closeLoading();
        });
        
    };

    function fnShowSelect (_items) {
        var UIMultiSelector = api.require('UIMultiSelector');
        UIMultiSelector.open({
             rect: {
                h: 350
             },
             text: {
                title: '选择开户银行',
                leftBtn: '',
                rightBtn: '',
             },
             max: 0,
             singleSelection: true,
             styles : {
                mask: 'rgba(0,0,0,0.3)',
                title: {
                    bg: '#eef2f3',
                    color:'#000',
                    size: 16,
                    h: 50
                },
                leftButton: {
                    bg: 'rgba(0,0,0,0)',
                    w: 80,
                    h: 0,
                    marginT: 5,
                    marginR: 8,
                    color: '#fff',
                    size: 14
                },
                rightButton: {
                    bg: 'rgba(0,0,0,0)',
                    w: 80,
                    h: 35,
                    marginT: 5,
                    marginR: 8,
                    color: '#1dbcd1',
                    size: 14
                },
                item : {
                    h : 40,
                    textAlign : 'center',
                    size:16
                },
                icon: {
                    w: 0,
                    h: 0,
                    marginT: 0,
                    marginH: 0,
                    bg: '#fff',
                    align: 'left'
                }
             },
             animation: true,
             items: _items
        }, function(ret, err) {
            if (ret) {
                if(ret.eventType == 'clickRight') {
                    UIMultiSelector.close();
                }
                if(ret.eventType == 'clickItem') {
                    var select_text = ret['items'][0]['text'];
                    bank = ret['items'][0]['id'];
                    $(".choose_bank").text(select_text);
                    UIMultiSelector.close();
                }
            }
        });
    };

    function evChangeApplyIdcardFront (_path,_from) {
        $("."+_from+'side').attr('src',formatHeadImg(_path));
        if(_from == 'front'){
            frontside = _path;
        }else if(_from == 'reverse'){
            reverseside = _path;
        }else if(_from == 'drive_front'){
            drive_frontside = _path;
        }else if(_from == 'drive_reverse'){
            drive_reverseside = _path;
        }
    };

    function toAjaxReply (_name,_phone,_address,_idcard,bank_account_name,account) {
        openLoading();
        var staffData = $api.getStorage('staff_data');
        api.ajax({
            url: rootPath+'/api/staff/apply_staff',
            method: 'post',
            data: {
                values: { 
                    staff_id: staffData.id,
                    staff_token: staffData.token,
                    name: _name,
                    phone: _phone,
                    address: _address,
                    idcard: _idcard,
                    img: img,
                    frontside: frontside,
                    reverseside: reverseside,
                    drive_frontside: drive_frontside,
                    drive_reverseside: drive_reverseside,
                    bank_account_name: bank_account_name,
                    account: account,
                    bank: bank
                },
            }
        }, function(ret, err) {
            if (ret) {
                if(ret.status == 200){
                    toast('提交成功');
                    api.sendEvent({
                        name: 'applySuccess',
                    });
                    setTimeout(function(){
                        api.closeWin();
                    },300);
                }else if(ret.status == 201){
                    toast('手机号已存在');
                }
            }
            closeLoading();
        });
    };



    function fnGoApply () {
        var name = $(".name").val();
        var phone = $(".phone").val();
        var address = $(".address").val();
        var idcard = $(".idcard").val();
        var bank_account_name = $(".bank_account_name").val();
        var account = $(".account").val();
        if(img == ''){
            toast('头像不能为空');
            return;
        }
        if(name == ''){
            toast('姓名不能为空');
            return;
        }
        if(phone == ''){
            toast('手机号不能为空');
            return;
        }
        if(!checkMoble(phone)){
            toast('手机号格式不正确');
            return;
        }
        if(address == ''){
            toast('地址不能为空');
            return;
        }
        if(idcard == ''){
            toast('身份证不能为空');
            return;
        }
        if(!checkIdcard(idcard)){
            toast('身份证格式不正确');
            return;
        }
        if(!bank){
            toast('请选择开户银行');
            return;
        }
        if(!bank_account_name){
            toast('开户人不能为空');
            return;
        }
        if(!account){
            toast('银行账户不能为空');
            return;
        }
        if(frontside == ''){
            toast('身份证正面不能为空');
            return;
        }
        if(reverseside == ''){
            toast('身份证反面不能为空');
            return;
        }
        if(drive_frontside == ''){
            toast('驾驶证正面不能为空');
            return;
        }
        if(drive_reverseside == ''){
            toast('驾驶证反面不能为空');
            return;
        }
        toAjaxReply(name,phone,address,idcard,bank_account_name,account);
    }

    function toStaffHead () {
        api.openWin({
            name: 'apply_head',
            url: './apply_head.html',
            pageParam:{
                head_img:img
            }
        });
    }

    function toIdcardPhone (_from) {
        $("input").blur();
        api.openFrame({
            name: 'apply_camera_dialog',
            url: 'apply_camera_dialog.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            bounces: false,
            pageParam: {
                from: _from
            }
        });
    };


</script>
</html>